<script setup lang="ts">
import type { iPro } from '../views/home/indexType'
import { ref } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const { proList } = defineProps({
    proList: Array<iPro>
})

const boxType: Ref<number, number> = ref(1)
function changeTypeClick() {
    boxType.value = boxType.value == 1 ? 2 : 1
}


function goToDetail(proid: string) {
    // router.push('/detail')

    router.push({
        // path: '/detail'
        name: 'detail',
        // 路由传参
        query: {
            proid,
            a: 1,
            b: 8
        }
    })

}
</script>
<template>

    <div class="proList">

        <div @click="goToDetail(item.proid)" :class="'box' + boxType" :key="item.proid" v-for="item in proList">
            <img :src="item.img1" alt="">
            <div>
                <p class="van-multi-ellipsis--l2">{{ item.proname }}</p>
                <span>￥{{ item.originprice }}</span>
            </div>
        </div>


        <div class="change-type" @click="changeTypeClick">
            <van-icon :name="boxType == 1 ? 'list-switch' : 'list-switching'" size="28" />
        </div>

    </div>

</template>

<style scoped lang="scss">
.proList {
    display: flex;
    flex-wrap: wrap;
}

// 上图下文
.box1 {
    width: 48%;
    height: 2.8rem;
    border: 1px solid #f66;
    margin: 5px 1%;

    img {
        width: 100%;
        height: 2rem;
    }

    div {
        padding: 10px;

        p {
            font-weight: 600;
        }

        span {
            color: #f66;
        }
    }
}


// 左图右文
.box2 {
    width: 100%;
    height: 1.2rem;
    border: 1px solid #f66;
    margin: 5px 1%;
    padding: 5px;
    display: flex;


    img {
        width: 1.1rem;
        height: 1.1rem;
    }

    div {
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p {
            font-weight: 600;
        }

        span {
            color: #f66;
        }
    }
}

.change-type {
    position: fixed;
    bottom: .6rem;
    right: 10px;
    width: .42rem;
    height: .42rem;
    background-color: white;
    border: 1px solid #f66;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

}
</style>